import { PageContainer } from '@ant-design/pro-components';
import { Card, theme } from 'antd';
import React,{useState,useEffect} from 'react';
import {keyframes} from "antd-style";

/**
 * 每个单独的卡片，为了复用样式抽成了组件
 * @param param0
 * @returns
 */
const fadeIn = keyframes`
    from {
        opacity: 0; /* 初始时完全透明 */
    }
    to {
        opacity: 1; /* 结束时完全不透明 */
    }
`;
const InfoCard: React.FC<{
    title: string;
    index: number;
    desc: string;
    href: string;
}> = ({ title, href, index, desc }) => {
    const { useToken } = theme;

    const { token } = useToken();

    return (
        <Card

            style={{
                backgroundColor: token.colorBgContainer,
                boxShadow: token.boxShadow,
                borderRadius: '30px'  ,
                fontSize: '16px',
                color: token.colorTextSecondary,
                lineHeight: '22px',
                padding: '16px 19px',
                minWidth: '220px',
                flex: 1,
                marginTop: '16px',
                animation: `${fadeIn} 0.5s ease-in-out`,
            }}
        >
            <div
                style={{
                    display: 'flex',
                    gap: '4px',
                    alignItems: 'center',
                }}
            >
                <div
                    style={{
                        width: 48,
                        height: 48,
                        lineHeight: '22px',
                        backgroundSize: '100%',
                        textAlign: 'center',
                        padding: '8px 16px 16px 12px',
                        color: '#FFF',
                        fontWeight: 'bold',
                        backgroundImage:
                            "url('https://gw.alipayobjects.com/zos/bmw-prod/daaf8d50-8e6d-4251-905d-676a24ddfa12.svg')",
                    }}
                >
                    {index}
                </div>
                <div
                    style={{
                        fontSize: '22px',
                        color: token.colorText,
                        paddingBottom: 8,
                    }}
                >
                    {title}
                </div>
            </div>
            <div
                style={{
                    fontSize: '18px',
                    color: token.colorTextSecondary,
                    textAlign: 'justify',
                    lineHeight: '22px',
                    marginBottom: 24,
                }}
            >
                {desc}
            </div>
            <a href={href} target="_blank" rel="noreferrer">
                了解更多 {'>'}
            </a>
        </Card>
    );
};

const Welcome: React.FC = () => {
    const text = "E-API开放平台是一款自由的api开放社区平台，您可以在平台上调用各种api接口以实现您想要的功能。如果说您想成为开发者，请开通社区管理员，成为管理员后，您可以在平台开放您的接口，本平台提供可视化流量检测接口用以丰富您的业务考量。";
    const [displayedText, setDisplayedText] = useState('');
    const [currentIndex, setCurrentIndex] = useState(0);

    useEffect(() => {
        const interval = setInterval(() => {
            if (currentIndex < text.length) {
                setDisplayedText(prevText => prevText + text[currentIndex]);
                setCurrentIndex(prevIndex => prevIndex + 1);
            } else {
                clearInterval(interval); // 文本全部显示后清除定时器
            }
        }, 1); // 每个字符之间的时间间隔，单位为毫秒

        return () => clearInterval(interval); // 组件卸载时清除定时器
    }, [currentIndex, text]);
    const { token } = theme.useToken();
    return (
        <PageContainer>
            <Card
                style={{
                    borderRadius: 18,
                    width: '100%',
                    height: "100%	",
                }}

            >
                <div
                    style={{
                        marginTop: 24,
                        backgroundPosition: '100% 0',
                        backgroundRepeat: 'no-repeat',
                        backgroundSize: '200px auto',
                        backgroundImage: "url('https://tse4-mm.cn.bing.net/th/id/OIP-C.ox3_Y53WCiCfQ778oXVarQHaI_?w=198&h=241&c=7&r=0&o=5&pid=1.7')",
                    }}
                >
                    <div
                        style={{
                            fontSize: '40px',
                            color: token.colorTextHeading,
                        }}
                    >
                        欢迎使用E-API开放平台
                    </div>
                    <p
                        style={{
                            fontSize: '20px',
                            color: token.colorTextSecondary,
                            lineHeight: '40px',
                            marginTop: 16,
                            marginBottom: 32,
                            width: '65%',
                        }}
                    >
                        {text}
                    </p>
                    <div
                        style={{
                            display: 'flex',
                            flexWrap: 'wrap',
                            gap: 16,
                            height: 320,

                        }}

                    >
                        <InfoCard
                            index={1}
                            href="platformRule"
                            title="了解社区"
                            desc="平台管理规范和使用框架。"
                        />
                        <InfoCard
                            index={2}
                            title="管理员升级"
                            href="/updateManager"
                            desc="开通管理员服务后，您可以自己实现接口计费。"
                        />
                        <InfoCard
                            index={3}
                            title="个人中心"
                            href="/userControl/userCenter"
                            desc="进入您的个人中心，获取平台API-KEY"
                        />
                    </div>
                </div>
            </Card>
        </PageContainer>
    );
};

export default Welcome;
